import React from 'react';
import { Tooltip, Button, message } from 'antd';
import CommonList from '../../../components/CommonLists/list';
import CommonListsIndex from '../../../components/CommonLists';
import AuditStatus from '../../../components/AuditStatus';
import Modal from '../../../components/Modal';
import services from '../../../services/api';
import Add from './add';
import { AUDIT } from '../../../utils/constant';

class List extends CommonList {
  constructor(props) {
    super(props);
    this.editButton = (record) => {
      return (
        <Button
          size='small'
          type='link'
          onClick={this.edit.bind(this, record)}
          disabled={this.props.isAudit || record.audit_status === this.AUDIT._WAIT}
        >
          编辑
        </Button>
      );
    };
    this.delButton = (record) => {
      return (
        <Button
          size='small'
          type='link'
          onClick={this.delete.bind(this, record)}
          disabled={this.props.isAudit || record.audit_status === this.AUDIT._WAIT}
        >
          删除
        </Button>
      );
    };
    this.btnGroup = [this.editButton, this.delButton];
  }

  delete = ({ third_list_map_id }) => {
    Modal.open({
      title: '',
      width: '360px',
      isConfirm: true,
      content: <p>确定要删除当前映射么?</p>,
      ok: () => {
        services.outerList.deleteMap({ third_list_map_id }).then((data) => {
          if (data.code === 0) {
            message.success(data.msg);
            this.props.queryList();
            Modal.close();
          } else {
            message.error(data.msg);
          }
        });
      },
      cancel: () => {
        Modal.close();
      },
    });
  };
}

class ExpandedList extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.state = {
      applications: [],
      products: [],
      events: [],
    };
    this.listsComponent = List;
    this.editComponent = Add;
    this.api = 'outerList';
    this.queryParams = {};
  }

  componentDidMount() {
    this.getAppCodeList();
    this.getProductCodeList();
  }

  edit = (record) => {
    const EditComponent = this.editComponent;
    Modal.open({
      title: '字段映射',
      width: '1000px',
      content: (
        <EditComponent
          record={this.props.record}
          childRecord={record}
          closeModal={this.closeModal}
          actionType='child-update'
          {...this.props}
        />
      ),
      maskClosable: false,
      isOkBtn: false,
      isCancelBtn: false,
    });
  };

  freshQueryList = () => {
    const { third_list_config_id } = this.props.record;
    const params = { third_list_config_id, ...this.queryTableParams };
    this.queryList(params);
  };

  queryList(params) {
    services[this.api].getChildMapList(params).then(({ code, data, msg }) => {
      if (code === 0) {
        this.setState({
          data,
        });
      } else {
        message.error(msg);
      }
    });
  }

  getColumns = () => [
    {
      title: '序号',
      key: 'index',
      render: (_, __, index) => index + 1,
    },
    {
      title: (
        <>
          {this.getFilterTitle(
            '所属渠道',
            this.state.applications,
            'app_id',
            this.refreshTableFilterWithAppV2.bind(this, 'app_id'),
            ['app_id', 'app_name']
          )}
        </>
      ),
      dataIndex: 'app_name',
      render: (text) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      },
    },
    {
      title: (
        <>
          {this.getFilterTitle(
            '关联产品',
            this.state.products,
            'product_id',
            this.refreshTableFilterWithAppV2.bind(this, 'product_id'),
            ['product_id', 'product_name']
          )}
        </>
      ),
      dataIndex: 'product_name',
      render: (text) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      },
    },
    {
      title: (
        <>
          {this.getFilterTitle(
            '关联事件',
            this.state.events,
            'event_id',
            this.refreshTableFilterWithAppV2.bind(this, 'event_id'),
            ['event_id', 'event_name']
          )}
        </>
      ),
      dataIndex: 'event_name',
      render: (text, _) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      },
    },
    {
      title: '创建人/修改人',
      dataIndex: 'type',
      render: (_, { create_user_name, update_user_name }) => {
        const text = [create_user_name, update_user_name].filter(Boolean).join('/');
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      },
    },
    {
      title: '修改时间',
      dataIndex: 'update_time',
      width: 200,
      render: (text) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext' style={{ width: '80%' }}>
              {text}
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: '审核情况',
      key: 'audit_label',
      dataIndex: 'audit_label',
      width: 100,
      render: (text, record) => <AuditStatus text={text} record={record} />,
    },
  ];

  render() {
    const { value, record } = this.props;
    const { data } = this.state;
    const ListsComponent = this.listsComponent;
    return (
      <div style={{ padding: '10px 20px 20px' }}>
        <ListsComponent
          edit={this.edit}
          list={data || value}
          currentPage
          rowKey={(_, index) => index}
          queryList={this.freshQueryList}
          columns={this.getColumns()}
          isAudit={record.audit_status === AUDIT._WAIT}
        />
      </div>
    );
  }
}

export default ExpandedList;
